<template>
  <div class="box">
    <div class="inner">
      <h1>登 录</h1>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="0"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="" prop="countNumber">
          <el-input
            v-model="ruleForm.countNumber"
            placeholder="请输入手机号/用户名"
          />
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input
            v-model="ruleForm.password"
            placeholder="请输入密码"
            type="password"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="width: 70%; margin-left: 15%"
            size="default"
            @click="submitForm(ruleFormRef)"
          >
            登录
          </el-button>
          <!-- <el-button @click="resetForm(ruleFormRef)">Reset</el-button> -->
        </el-form-item>
      </el-form>
      <div class="checkBox">
        <el-radio-group v-model="radio">
          <el-radio
            :label="true"
            @click.prevent="radioChange()"
            class="mr-5"
            style="height: 50px"
            size="large"
            >记住登录状态</el-radio
          >
        </el-radio-group>
        <p>忘记密码 ?</p>
      </div>
      <otherwise></otherwise>
      <div class="redTriangle"><h2 @click="registerPage">注 册</h2></div>
      <div class="whiteTriangle"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, defineEmits } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import otherwise from "@/views/components/otherwise.vue";
import { ElMessage } from "element-plus";
const emit = defineEmits(["changeShowLogin"]);

let radio = ref(false);

interface RuleForm {
  countNumber: string;
  password: number | undefined;
}

const formSize = ref("large");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  countNumber: "",
  password: undefined,
});

const rules = reactive<FormRules<RuleForm>>({
  countNumber: [
    { required: true, message: "请输入手机号/用户名", trigger: "blur" },
    // { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

/**
 * 跳转到首页
 */
 import { useRouter } from "vue-router";
const router = useRouter();
const homePage = () => {
  router.push({
    path: "/index",
  });
};
/**
 * 登录操作
 * @param formEl 
 */
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      homePage();
      ElMessage({
        message: "登陆成功!",
        type: "success",
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

/**
 * 重置表单
 * @param formEl 
 */
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
const radioChange = () => {
  radio.value = !radio.value;
};
/**
 * 跳转注册页
 */
const registerPage = () => {
  emit("changeShowLogin", false);
};
</script>

<style lang="scss" scoped>
.box {
  width: 4rem;
  height: 70%;
  margin-top: 6%;
  margin-bottom: 6%;
  background-color: #fff;
  .inner {
    padding: 10% 25%;
    position: relative;
  }
}
.redTriangle {
  width: 1rem;
  height: 1rem;
  position: absolute;
  right: 0;
  top: 0;
  background: linear-gradient(
    45deg,
    transparent,
    transparent 50%,
    rgb(236, 0, 0) 50%,
    rgb(236, 0, 0) 100%
  );
}
.whiteTriangle {
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  right: 0;
  top: 0;
  background: linear-gradient(
    45deg,
    transparent,
    transparent 50%,
    white 50%,
    white 100%
  );
}
h1 {
  font-size: 0.16rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.1rem;
}
h2 {
  font-size: 0.16rem;
  font-weight: bold;
  text-align: right;
  padding-right: 0.13rem;
  line-height: 0.5rem;
  transform: rotate(45deg);
  color: #fff;
  cursor: pointer;
  position: relative;
  z-index: 100;
}
.checkBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
  p {
    font-size: 0.07rem;
    cursor: pointer;
    color: #409eff;
    line-height: 0.269rem;
  }
}
::v-deep(.el-form-item__content) {
  margin-bottom: 0.15rem;
}

::v-deep(.el-radio__inner) {
  border-radius: 2px !important;
}

::v-deep(.el-radio__input.is-checked .el-radio__inner::after) {
  content: "";
  width: 8px;
  height: 3px;
  border: 1px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 3px;
  left: 2px;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}
</style>
